---
# title: "Install Tailwind CSS with Laravel"
title: "在 Laravel 中安装 Tailwind CSS"
# description: "Setting up Tailwind CSS in a Laravel project."
description: "在 Laravel 工程中配置 Tailwind CSS。"
tool: Laravel Mix
---

```preval installation
tool: Laravel
reference:
  name: the Laravel Installer 
  link: https://laravel.com/docs/8.x#via-laravel-installer
script: laravel new
npmInstall: true
```

---

```preval setup
dev: true
soon: true
version: compat-7
```

```preval configuration
postcss: false
types:
  - Blade templates
  - JavaScript components
purge: 
  - ./resources/**/*.blade.php
  - ./resources/**/*.js
  - ./resources/**/*.vue
```

<!-- ### Configure Tailwind with Laravel Mix

In your `webpack.mix.js`, add `tailwindcss` as a PostCSS plugin: -->
### 在 Laravel Mix 中配置 Tailwind

在您的 `webpack.mix.js` 中，添加 `tailwindcss` 作为 PostCSS 插件。

```diff-js
  // webpack.mix.js
  mix.js("resources/js/app.js", "public/js")
    .postCss("resources/css/app.css", "public/css", [
+     require("tailwindcss"),
    ]);
```

```preval include
tool: Laravel
file: ./resources/css/app.css
```

<!-- Next, import your stylesheet in your main Blade layout (commonly `resources/views/layouts/app.php` or similar) and add the responsive viewport meta tag if it's not already present: -->
接下来，在您的主 Blade 布局中导入您的样式表(通常是 `resources/views/layouts/app.php` 或类似的)，如果还没有存在的话， 请添加响应的视口元标签。

```diff-html
  <!doctype html>
  <head>
    <!-- ... --->
+   <meta charset="UTF-8" />
+   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+   <link href="{{ asset('css/app.css') }}" rel="stylesheet">
  </head>
  <!-- ... --->
```

---

```preval finish
scripts:
  - npm run watch
  - npm run dev
  - npm run prod
```

